<template>
    <div class="content">
        <div class="header">
            <p><span>女</span></p>
            <dl>
                <dt><img :src="grtx" alt=""></dt>
                <dd>{{phone}}</dd>
            </dl> 
        </div>
        <div class="content">
            <div class="content1">
                <p><span><img :src="qian" alt="">省钱币<a href="">100</a></span><span><img :src="qian" alt="">省钱积分<a href="">100</a></span></p>
            </div>  
            <div class="content2">
                <ul>
                    <router-link to="/profile/status"><img :src="dd" alt=""><br>我的订单</router-link>
                    <li><img :src="yh" alt=""><br>已领优惠卷</li>
                    <li><img :src="sc" alt=""><br>我的收藏</li>
                    <li><img :src="ll" alt=""><br>浏览记录</li>
                </ul>
            </div>
            <div class="content3">
                <h3>其他功能</h3>
                <ul>
                    <li><img :src="xd" alt=""><br>我的订单</li>
                    <li><img :src="zn" alt=""><br>已领优惠卷</li>
                    <li><img :src="fk" alt=""><br>我的收藏</li>
                    <li><img :src="xd" alt=""><br>浏览记录</li>
                </ul>
                <ul>
                    <li><img :src="gx" alt=""><br>我的订单</li>
                    <li><img :src="zn1" alt=""><br>已领优惠卷</li>
                    <li><img :src="fk1" alt=""><br>我的收藏</li>
                    <li><img :src="fx1" alt=""><br>浏览记录</li>
                </ul>
            </div> 
        </div>
         <router-view></router-view>
        <my-footer></my-footer>
     </div>
     
</template>
<script>
import MyFooter from '@/components/MyFooter'
export default {
  data () {

    return {
       grtx:("../../static/imggr/1.png"),
       qian:("../../static/imggr/qian.png"),
       phone:"182****8888",
       dd:('../../static/imggr/dd.png'),
       yh:('../../static/imggr/yh.png'),
       sc:('../../static/imggr/sc.png'),
       ll:('../../static/imggr/ll.png'),
       xd:('../../static/imggr/xd.png'),
       zn:('../../static/imggr/zn.png'),
       fk:('../../static/imggr/fk.png'),
       fx:('../../static/imggr/fx.png'),
       gx:('../../static/imggr/gx.png'),
       zn1:('../../static/imggr/zn1.png'),
       fk1:('../../static/imggr/fk1.png'),
       fx1:('../../static/imggr/fx1.png')
    }
  },
  components:{
    MyFooter
  }
}
</script>

<style scoped lang="less">
    .header{ 
        height: 120px;
        padding: 20px;
        color: aliceblue;
        background: #00a0e9;
        p{
            height: 40px;
            line-height: 40px;
            span{
                float: right;
            } 
        }
        dl{
            display: flex;
            height: 110px;
            dt{
                display: block;
                width: 50px;
                height: 50px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            dd{
                display: flex;
                padding-left: 20px;
                line-height: 70px; 
            }
        }  
    }
    .content{
        background: #f5f5f5;
        .content1{
            p{
                display: flex;
                justify-content: space-between;
                height: 40px;
                line-height: 40px;
                margin: 10px 0;
                padding: 0 20px;
                font-size: 18px;
                color: #000;
                background: #ffffff;
                span{
                    display: flex;
                    img{
                        width: 30px;
                        height: 30px;
                        display: flex;
                        margin-top: 6px
                    }
                }
                
            }
        }
    }
.content2{ 
    background: #ffffff;
    ul{
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
    }
}
.content3{ 
    background: #ffffff;
    padding-bottom: 10%;
    h3{
        font-size: 20px;
        display: block;
    }
    margin: 15px 0;
    ul{
        display: flex;
        justify-content: space-between;
        padding: 10px 10px;
    }
}
</style>
